<template>
  <div id="app">
    
    <div class="cardInfo">
      <div class="card-header">
        <i class="iconfont icon-taiyang" style="font-size:50px"></i>

        <div>
          <span style="font-size:20px; height:50px">{{attrlist.name}}</span>
          <i style="font-size:12px;margin-left:5px;background-color:#ccc">LV.{{attrlist.lv}} 最强老板</i>
        </div>
      
        <van-button class="buttonInfo" type="info" size="small" style="border-radius:20px">{{attrlist.logo}}</van-button>
      </div>
      <div class="card-foot">
        <div class="data">邀请新户加入众享空间并完成认证</div>
        <div class="data">
          <van-progress :percentage="84" style="width:80%" />
        </div>
        <div class="datax">
          <div class="data" style="font-size:12px">距离下一等级还差4笔</div>
          <div>20笔</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue"
import { Progress ,Button} from 'vant';
Vue.use(Progress);
Vue.use(Button);
export default {
  name: 'cardList',
  props:["attrlist"]
}
</script>

<style>
*{
  padding:0;
  margin: 0;
}


.cardInfo{
  border-radius: 20px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  height: 170px;
  width: 90%;
  background-color: rgb(166, 182, 189);
}
/* .cardInfo{
  position: relative;
  top:-80px
} */
.cardInfo .card-header{
  font-weight: 700;
  display:flex;
  height: 80px;
  line-height:80px;
  justify-content:space-around;
}
.cardInfo .card-header img{
  height: 80px;
  width: 80px;
}
.cardInfo .card-header .buttonInfo{
  margin-top:26px;
  width: 60px;
  height: 30px;
  text-align:center;
  line-height:30px;
  background: blue;
}
.cardInfo .card-foot{
  margin-left:50px;

}
.cardInfo .card-foot .data{
  padding:5px 0 ;
  font-size: 14px;
}
.datax{
  display:flex;
  justify-content: space-between;
  margin-right: 60px;
  font-size: 12px;
  align-items: center;
}

</style>
